<template>
  <div>
    <div class="page-title">{{ getLang('pageTitle') }}</div>
    <div class="app-container">

      <div class="filter-container">
        <comm-form
          ref="searchForm"
          :form-visible="true"
          :form-definition="jobTitleSearchFormLayout"
          :form-data="formObj.searchForm.jobTitle"
        />
      </div>

      <FlexTable
        ref="jobTitleList"
        :table-key="listObj.jobTitle.isUpdate"
        :ref-main-page="refSelfObj"
        :title="getLang('jobTitleList')"
        :show-selection="false"
        :has-action-columns="true"
        :table-visible="true"
        edit-mode="none"
        height="500"
        :is-loading="listObj.jobTitle.listLineLoading"
        :table-definition="jobtitleListLayout"
        :table-data="listObj.jobTitle.listLine"
      />
      <pagination
        v-show="listObj.jobTitle.lineNum>0"
        :total="listObj.jobTitle.lineNum"
        :page.sync="listObj.jobTitle.pagingDefine.page"
        :limit.sync="listObj.jobTitle.pagingDefine.limit"
        @pagination="searchJobTitleList"
      />

      <form-dialog
        v-if="formObj.addForm.showFlg.jobTitle"
        ref="jobTitleEditDlg"
        :close-on-click-modal="false"
        :dialog-visible="formObj.addForm.showFlg.jobTitle"
        :title="isAddJobTitle?getLang('addJobTitleInfo'):getLang('updatejobTitleInfo')"
        column-count="1"
        :form-data="formObj.addForm.jobTitle"
        :form-definition="jobTitleAddFormLayout"
        @close="formObj.addForm.showFlg.jobTitle = false"
      />

      <el-tooltip placement="top" content="tooltip">
        <back-to-top :custom-style="baseBckToTopStyle" :visibility-height="300" :back-position="1" transition-name="fade" />
      </el-tooltip>
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import BackToTop from '@/components/BackToTop'

import FormDialog from '../../common/components/form-dialog/FormDialog'
import FlexTable from '../../common/components/flex-table/FlexTable'
import CommForm from '../../common/components/com-form/CommForm'

import logic from './jobtitle.logic'

export default {
  name: 'JobTitlePage',
  components: {
    BackToTop, FormDialog, FlexTable, CommForm, Pagination
  },
  mixins: [logic]
}
</script>

<style scoped>
</style>
